<template>
  <div class="title_wrapper">
    <div class="title_label">
      <span class="title">{{title}}</span>
      <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
        <i class="iconfont icon-shuaxin" @click="refreshData"></i>
      </el-tooltip>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'OneTitle',
  props: {
    // 标题
    title: {
      type: String
    },
    isIcon: {
      type: Boolean
    }
  },
  methods: {
    refreshData() {
      this.$emit('refreshData')
    }
  }
}
</script>
<style scoped lang="less">
  //一级title高度
  @oneTitle: 55px;
  //一级title
  @oneTitleFont: 18px;
  //one_title 一级标题
  .title_wrapper {
    height: @oneTitle;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    border-bottom: @oneTitleBotBor;

    .title_label {
      height: @oneTitleFont + 2px;
      display: flex;
      align-items: center;
      border-left: 5px solid @oneTitleBorderC;
    }

    .title {
      font-size: @oneTitleFont;
      color: @oneTitleColor;
      height: @oneTitleFont;
      line-height: @oneTitleFont - 2px;
      padding-left: 5px;
      font-weight: bold;
    }

    .icon-shuaxin {
      font-size: @oneTitleFont - 1px;
      padding-left: 5px;
      color: @oneTitleRefresh;
      cursor: pointer;
      padding-top: 1px;

      &:hover {
        color: darken(@oneTitleRefresh, 5%);
      }

      &:active {
        color: darken(@oneTitleRefresh, 10%);
      }
    }
  }
</style>
